<template>
  <div class="creatlist">
    <div class="user">
      <img src="" alt="" />
      <span></span>
    </div>
    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item icon="" text="创建歌单" @click="creatlist(id)" />
      <van-grid-item icon="" text="收藏歌单" @click="liststar(id)" />
      <van-grid-item icon="" text="歌单助手" @click="listhelper(id)" />
    </van-grid>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
    >
      <van-cell is-link title="创建歌单" @click="show = true" icon="plus" />
      <van-action-sheet v-model="show" title="创建歌单">
        <div class="content">
          <van-cell-group>
            <van-field
              v-model="value"
              label="歌单名"
              placeholder="请输入歌单名"
            />
            <div class="btn">
              <van-button type="info" @click="onSave(value)" size="small"
                >确定</van-button
              >
              <van-button type="warning" size="small">取消</van-button>
            </div>
          </van-cell-group>
        </div>
      </van-action-sheet>
      <div class="mylist" @click="mylove">
        <div class="mylistleft">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F06%2F20210306210053_b1fb1.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638413967&t=c02207857cbeb4d864f91f5534c9fec2"
            alt=""
          />
          <div class="lmylist">
            <p>我喜欢的音乐我超拽的我超拽的</p>
            <span>{{ likelist.length }}首</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import axios from 'axios'
// import { getusermsgAPI } from '@/api/mine.js'
import { Toast } from 'vant'
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: true,
      show: false,
      value: '',
      likelist: [],
      id: '',
    }
  },
  computed: {},
  watch: {},

  methods: {
    //跳转我的喜欢
    mylove(id) {
      this.$router.push('/mylove/' + id)
    },
    //跳转创建歌单
    creatlist(id) {
      this.$router.push('/creatlist/' + id)
    },
    //跳转歌单收藏
    liststar(id) {
      this.$router.push('/liststar/' + id)
    },
    //跳转歌单助手
    listhelper(id) {
      this.$router.push('/listhelper/' + id)
    },
    //创建歌单
    async onSave(value) {
      // console.log(value)
      const name = value
      axios
        .post(`http://localhost:3000/playlist/create?name=${name}`)
        .then((res) => {
          console.log(res, 666)
          if (res.status === 200) {
            this.list = res.data.playlist
            Toast('保存')
          }
        })
      // const result = await creatlistAPI(value)
      // console.log(result)
    },
    onDelete() {
      Toast('删除')
    },
    //获取喜欢音乐列表
    getlikemusic(id) {
      axios
        .get('http://localhost:3000/likelist', {
          params: {
            uid: id,
          },
        })
        .then((res) => {
          console.log(res, 666)
          if (res.status === 200) {
            this.likelist = res.data.ids
          }
        })
    },

    onLoad() {},
  },
  created() {
    const id = this.$route.params.id
    this.id = id
    console.log(id)
    this.getlikemusic(id)
  },
  mounted() {},
  components: {},
}
</script>
<style scoped>
.creatlist {
  padding: 15px;
}

.mylist {
  padding: 10px;
  background-color: white;
  overflow: hidden;
}
.mylistleft {
  float: left;
}
.mylistleft img {
  float: left;
  width: 50px;
  height: 50px;
}
.mylistleft .lmylist {
  float: right;
}
.mylistleft .lmylist p {
  line-height: 30px;
}
.mylistleft .lmylist span {
  font-size: 12px;
}
.content {
  padding: 16px 16px 160px;
  text-align: center;
}
.btn {
  margin: 40px 0;
}
</style>
